{include file="common/header" title="海贼人物列表页" /}
<style>
    ul.pagination {
        display: inline-block;
        padding: 0;
        margin: 0;
    }

    ul.pagination li {display: inline;}

    ul.pagination li a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
    }
</style>
<div class="layui-row">
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
        <div class="grid-demo">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>海贼人物列表</legend>
            </fieldset>
            <div style="width: 100%; height: auto; min-height: 100px;">
                {volist name="character" id="vo" empty="暂时没有数据"}
                <div class="layui-col-md3">
                    <img src="{$vo.ch_img}" width="100%" /><br/>
                    {$vo.ch_name}：受欢迎度{$vo.ch_click}
                </div>
                {/volist}
            </div>
        </div>
        <div style="width: 100%; clear: both; height: 30px;"></div>
        {$page}
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
        <div class="grid-demo">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>名字</th>
                    <th>悬赏金额</th>
                </tr>
                </thead>
                <tbody>
                {volist name="chrew" id="vo"}
                <tr>
                    <td>{$vo.ch_name}</td>
                    <td>{$vo.re_rew}贝利</td>
                </tr>
                {/volist}
                </tbody>
            </table>
        </div>
    </div>
</div>
{include file="common/footer" /}
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>
</body>
</html>